<template>
  <div class="roomManage gl-border">
    <div class="content-item">
      <Bread :breadData="breadData" />
      <el-button type="primary"
                 size="small"
                 style="float: right"
                 @click="addArea">+添加园区</el-button>
    </div>
    <div class="content-item">
      <TabList :tabData="tabData"
               class="table-header-gray"
               :specCol="sepecCol"
               :columns="columns"></TabList>
      <pagenation :dataLength="total"
                  :page="queryParams.page"
                  :pageSize="queryParams.size"
                  :handleSizeChange="handleSizeChange"
                  :handleCurrentChange="handleCurrentChange" />
    </div>

    <add-or-edit-dialog ref="formDialog"
                        :dialogForm="dialogForm"
                        :schoolList="schoolList"
                        :handleClose="handleClose"
                        :addOrEditSure="addOrEditSure"
                        :rules="rules"
                        :title="title"
                        :addOrEditShow="addOrEditShow"></add-or-edit-dialog>
  </div>
</template>
<script>
import Bread from '../../componetns/bread'
import AddOrEditDialog from './addOrEditBuildDialog'
import { pagination } from '@/tools/mixin'
import {
  listParkUsingPOST,
  removeParkUsingDELETE,
  listSchoolAreaByUserUsingGET,
  addOrUpdateParkUsingPOST
} from '@api/auto'
export default {
  components: {
    Bread,
    AddOrEditDialog
  },
  mixins: [pagination],
  data () {
    return {
      total: 0,
      queryParams: {
        size: 10,
        page: 1
      },
      dialogForm: { id: null, schoolAreaId: null, name: null },
      schoolList: [],
      title: '',
      addOrEditShow: false,
      rules: {
        name: [
          { required: true, message: '请填写园区名称', trigger: 'blur' },
          { pattern: /^.{1,20}$/, message: '园区名称不能超过20字', trigger: 'blur' }],
        schoolAreaId: [{ required: true, message: '请选择校区', trigger: 'change' }]
      },
      breadData: [{ name: '园区', path: '/main/apartmentManage/roomManage/index' }],
      tabData: [],
      columns: [
        { label: '校区', prop: 'schoolAreaName' },
        { label: '园区', prop: 'name' },
        { label: '操作', prop: 'func' }
      ],
      sepecCol: [
        { label: '园区', prop: 'area', tem: '<el-button type="text" @click="that.$parent.intoArea(row)">{{area}}</el-button>' },
        {
          label: '操作',
          prop: 'func',
          tem: `<div>
          <el-button type="text" @click="that.$parent.edit(row)">编辑</el-button>
        <el-button type="text" @click="that.$parent.deleteFun(row)">删除</el-button>
        </div>` }
      ]
    }
  },
  created () {
    this.query()
    this.listSchoolAreaByUserUsingGET()
  },
  methods: {
    // 用户根据登陆用户查询可以查看的校区
    listSchoolAreaByUserUsingGET () {
      listSchoolAreaByUserUsingGET().then(res => {
        this.schoolList = res.data
      })
    },
    addArea () {
      this.addOrEditShow = true
      this.title = '添加园区'
    },
    intoArea (row) {
      this.$router.push({ name: 'floorManage' })
      sessionStorage.floorInfo = JSON.stringify(row)
    },
    edit (row) {
      this.addOrEditShow = true
      this.title = '编辑园区'
      this.dialogForm.id = row.id
      this.dialogForm.name = row.name
      this.dialogForm.schoolAreaId = row.schoolAreaId
    },
    // 删除园区
    deleteFun (row) {
      this.$confirm('确定删除该园区？', '提示', {
        type: 'warning'
      }).then(_ => {
        removeParkUsingDELETE(row.id).then(res => {
          this.$message.success('删除成功')
          this.query()
        })
      }).catch(() =>
        this.$message.info('已取消删除')
      )
    },
    // 关闭弹窗
    handleClose () {
      this.$refs.formDialog.$refs.dialogForm.resetFields()
      this.dialogForm = { id: null, schoolAreaId: null, name: null }
      this.addOrEditShow = false
    },
    // 弹窗确定按钮
    addOrEditSure () {
      this.$refs.formDialog.$refs.dialogForm.validate((valid) => {
        if (valid) {
          let body = {}
          if (this.title === '添加园区') {
            body = {
              name: this.dialogForm.name,
              schoolAreaId: this.dialogForm.schoolAreaId
            }
          }
          if (this.title === '编辑园区') {
            body = {
              id: this.dialogForm.id,
              name: this.dialogForm.name,
              schoolAreaId: this.dialogForm.schoolAreaId
            }
          }
          addOrUpdateParkUsingPOST(body).then(res => {
            this.query()
            this.handleClose()
            this.$message.success('操作成功')
          })
        }
      })
    },
    // 获取分页信息
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      listParkUsingPOST(this.queryParams).then(res => {
        this.tabData = res.data.list
        this.total = res.data.total || 0
      })
    }

  }
}
</script>
